<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #header{
            width: 100%;
            height: 60px;
            background-color: white;
            box-shadow: 0px 0px 3px 0px black;
            display: flex;
        }
        #header .logo{
            width: 55px;
            height: 90%;
            margin-left: 10%;
        }
        #header .logo img{
            width: 55px;
            height: 100%;
        }
        #banner{
            background-image: url("img/burrito-chicken-delicious-dinner-461198.jpg");
            background-size: 100%;
            background-position: center;
            height: 240px;
            width: 100%;
        }
        .search{
            width: 15%;
            margin-left: 60%;
            line-height: 60px;
            position: relative;
        }
        .search input {
            box-sizing: border-box;
            border-radius: 25px;
            width: 100%;
            outline: none;
            height: 30px;
            border: 1px solid darkred;
            background: url('img/搜搜.png') no-repeat;
            background-color: white;
            background-position: 95%;
            background-size: 20px;

        }
        body{
            background-color: #f5f5f5;
        }
        .btton{
            margin-top: 35px;
            text-align: center;
        }
        .btton button{
            width: 60%;
            height: 30px;
            border-radius: 25px;
            background-color: white;
            border: none;
            box-shadow: 0 0 2px 0 black;
        }
        .content{  margin: 0 auto ;
            width: 75%;
            /*border:1px solid sienna;*/
        }
        .content .box-content{

            width: 100%;
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
        }
        .content  .box-content>div{
            background-color: #ffffff;
           margin: 10px;
            height: 250px;
        }
         .lunbo img{
            box-shadow: 0 0 3px 0 black;
        }
         .kl{
             width: 80%;
             display: flex;
             margin: 0 auto;
             margin-top: 20px;
         }
         .right{
             width:20%;
             margin-right: 20px;
         }
         .right .top ,.right .bottom{
             width: 100%;
             height: 300px;
             background-color: white;
         }
        .side{
            background-color: #0c85d0;
            width: 100%;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
        }

        .right .bottom{
            margin-top: 30px;
        }
          .test{
             display: none;
         }
        @media screen and (max-width: 800px) {
            .kl{
                width: 80%;
            }
            .content .box-content{
                grid-template-columns: 33% 33% 33%;
                width: 100%;
            }
            .right{
                display: none;
            }
        }
        @media screen and (max-width: 400px) {
            .kl{
                width: 100%;
            }
            .content .box-content{
                grid-template-columns: 100%;
            }
            .content .box-content div{
                grid-template-columns: 100%;
                height: 320px;
            }
             .test{
                display: block;
            }
            .btton{
                margin-top: 18%;
            }
            .search{
                width: 50%;
                margin-left: 20%;
                line-height: 60px;

            }
            .search input{
                border-radius: 25px;
                width: 100%;
                outline: none;
                height: 30px;
                border:1px solid darkred;
            }


        }
    </style>
    <script src="//at.alicdn.com/t/font_1705354_ytk7i3tzze.js"></script>
</head>
<body>
<div id="header">
    <div class="logo"><img src="img/logo.png" ></div>
    <div  class="search"><input type="text">
     </div>
</div>
<div class="kl">
    <div class="right">
        <div class="top">
            <div class="side">Side</div>
        </div>
        <div class="bottom"> <div class="side">function</div></div>
    </div>
<div class="content">
    <div id="banner"></div>
    <p><h3>购物栏</h3><p>
    <div class="box-content">
    <div>
        <img src="img/stainless-steel-fork-near-clear-glass-on-tray-1510690.jpg" width="100%" height="55%">
    <p>这是超级好吃的糯米饭哦~</p>
    <div class="btton">
        <button>BUY</button>
    </div>
    </div>
    <div>
        <img src="img/stainless-steel-fork-near-clear-glass-on-tray-1510690.jpg" width="100%" height="55%">
        <p>这是超级好吃的糯米饭哦~</p>
        <div class="btton">
            <button>BUY</button>
        </div>
    </div>
    <div>
        <img src="img/stainless-steel-fork-near-clear-glass-on-tray-1510690.jpg" width="100%" height="55%">
        <p>这是超级好吃的糯米饭哦~</p>
        <div class="btton">
            <button>BUY</button>
        </div>
    </div>
    <div>
        <img src="img/stainless-steel-fork-near-clear-glass-on-tray-1510690.jpg" width="100%" height="55%">
        <p>这是超级好吃的糯米饭哦~</p>
        <div class="btton">
            <button>BUY</button>
        </div>
    </div>
    <div>
        <img src="img/stainless-steel-fork-near-clear-glass-on-tray-1510690.jpg" width="100%" height="55%">
        <p>这是超级好吃的糯米饭哦~</p>
        <div class="btton">
            <button>BUY</button>
        </div>
    </div>
    <div>
        <img src="img/asia-carrot-chopsticks-delicious-357756.jpg" width="100%">
        <p>这是超级好吃的糯米饭哦~</p>
        <div class="btton">
            <button>BUY</button>
        </div>
    </div>
    <div>
        <img src="img/asia-carrot-chopsticks-delicious-357756.jpg" width="100%">
        <p>这是超级好吃的糯米饭哦~</p>
        <div class="btton">
            <button>BUY</button>
        </div>
    </div>
    <div>
        <img src="img/asia-carrot-chopsticks-delicious-357756.jpg" width="100%">
        <p>这是超级好吃的糯米饭哦~</p>
        <div class="btton">
            <button>BUY</button>
        </div>
    </div>
    </div>
    </div>
</div>
</body>
</html>